<template>
	<view>
		<u-tabbar :customStyle="{height: '70px'}"  :value="current?current:0"  @change="tabbars" :border="true" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="bell" ></u-tabbar-item>
			<u-tabbar-item :customStyle="customStyles" text="开始匹配" >
				<view class="my_tabber"  slot="active-icon">
					<view class="carama">
						<image style="width: 60px;" src="../../static/images/照相机.png" mode="widthFix"></image>
					</view>
					<!-- <view class="text">
						开始匹配
					</view> -->
				</view>
				<view class="my_tabber"   slot="inactive-icon">
					<view class="carama">
						<image style="width: 60px;" src="../../static/images/照相机.png" mode="widthFix"></image>
					</view>
					<!-- <view class="text">
						开始匹配
					</view> -->
				</view>
			</u-tabbar-item>
			<u-tabbar-item text="购物车" icon="shopping-cart" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			current: Number
		},
		data() {
			return {
				customStyles: {
					position: 'fiexd',
					top:'30px',
					fontSize: '20px',
					justifyContent: 'space-between',
				},
				list: [{
						path: "/pages/index/index"
					},
					{
						path: "/pages/message/message"
					},
					{
						path: '/pages/carema/carema'
					},
					{
						path: '/pages/shopping_crad/shopping_crad'
					},
					{
						path: "/pages/mine/mine"
					}
				]
			};
		},
		methods: {
			tabbarChange(e) {
				console.log(e)
			
			},
			tabbars(e) {
				console.log(e)
				uni.switchTab({
					url: this.list[e].path
				})
			}
		}
	}
</script>

<style>
	.carama{
		width: 80px;
		height: 60px;
		background-color: white;
		border-radius: 60%;
		display: flex;
		justify-content: center;
	}
	.my_tabber{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		align-content: center;
		position: absolute;
	}
</style>